<template>
	<view>
		<view class="m-body">
			<view class="m-date">
				<view class="m-date-start">
					<text>{{getDateFormat(vuexStartDateObj.dateStr)}} {{vuexStartDateObj.recent == '' ? vuexStartDateObj.week : vuexStartDateObj.recent}}</text>
				</view>
				<block  v-if="order_sup != 3">
					<view class="m-date-line">-</view>
					<view class="m-date-end">
						<text>{{getDateFormat(vuexEndDateObj.dateStr)}} {{vuexEndDateObj.recent == '' ? vuexEndDateObj.week : vuexEndDateObj.recent}}</text>
					</view>
					<view class="m-date-count u-m-l-10">
						<text>共{{vuexDayCount}}晚</text>
					</view>
				</block>
			</view>
			<view class="m-info u-border-bottom">
				<view class="m-info-title">
					<view class="m-info-title__left u-line-1">
						<text>{{info.title}}</text>
						<text class="u-m-l-10" v-if="order_sup == 3">连住{{info.hour || ''}}小时</text>
					</view>
					<view class="m-info-title__right"
						@click="to_link('/pages2/hotel-type-detail/hotel-type-detail?id='+info.id)">
						<text>房型详情</text>
						<image src="@/static/index/icon-right.png" mode=""></image>
					</view>
				</view>
				<view class="m-info-spec">
					<text>{{info.subtitle || ''}}</text>
				</view>
				<!-- <view class="m-info-spec"  v-if="order_sup == 3">
					<text>连住{{info.hour || ''}}小时</text>
				</view> -->
				<view class="m-info-tag" v-if="info.tags">
					<view class="m-info-tag__item" v-for="(item,index) in info.tags" :key="index">
						<text>{{item}}</text>
					</view>
				</view>
			</view>

			<view class="m-intro">
				<view class="m-intro-left">
					<view class="u-line-1">
						<text>{{getgonggao}}</text>
					</view>
				</view>
				<view class="m-intro-right">
					<view class="m-intro-more" @click="show = true">
						<text>订房必读</text>
						<image src="@/static/index/icon-right.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="m-box">
				<view class="m-box-item">
					<text>· 预定房间需缴纳押金，订单完成后，退还押金</text>
				</view>
				<view class="m-box-item">
					<text>· 订单需在下单后30分钟内完成支付，超时将会自动取消</text>
				</view>
				<view class="m-box-item">
					<text>· 订单支付后可于30分钟内免费取消 逾期取消将扣除手续费</text>
				</view>
			</view>
		</view>
		<view class="m-cell u-border-bottom">
			<view class="m-cell-left">
				<text>房间数</text>
			</view>
			<view class="m-cell-right" v-if="order_sup == 3 || if_jifen == 1" >
				<text>{{params.count}}间</text>
			</view>
			<view class="m-cell-right" v-else @click="showCount = true">
				<text>{{params.count}}间</text>
				<image src="@/static/index/icon-right.png" mode=""></image>
			</view>
		</view>
		<view class="m-cell u-border-bottom">
			<view class="m-cell-left">
				<text>联系人</text>
			</view>
			<view class="m-cell-right">
				<input type="text" v-model="params.name" placeholder="请填写联系人" />
				<view class="m-cell-concat" @click="selectConcatFun">
					<image src="@/static/index/concat-icon.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="m-cell u-border-bottom">
			<view class="m-cell-left">
				<text>联系手机</text>
			</view>
			<view class="m-cell-right">
				<input type="number" v-model="params.phone" placeholder="请填写手机号" />
			</view>
		</view>
		<view class="m-cell u-border-bottom" v-if="order_sup != 3">
			<view class="m-cell-left">
				<text>预计到店</text>
			</view>
			<view class="m-cell-right" @click="showTime = true">
				<text>{{params.expect_time }}</text>
				<image src="@/static/index/icon-right.png" mode=""></image>
			</view>
		</view>
		<view class="m-cell u-border-bottom" style="display: none;" v-else >
			<view class="m-cell-left">
				<text>入住时段</text>
			</view>
			<view class="m-cell-right" @click="showTimeBetween = true">
				<text>{{ getTimeInfoComputed.title || '请选择' }}</text>
				<image src="@/static/index/icon-right.png" mode=""></image>
			</view>
		</view>

		<u-gap height="25" bg-color="#f4f4f4"></u-gap>
		<view class="m-cell u-border-bottom" v-if="couponList.length > 0" @click="couponShow = true">
			<view class="m-cell-left">
				<text>优惠券</text>
			</view>
			<view class="m-cell-right">
				<view class="m-cell-coupon" v-if="couponInfo">立减{{couponInfo.jian}}元</view>
				<view v-else>{{couponList.length}}张可用</view>
				<image src="@/static/index/icon-right.png" mode=""></image>
			</view>
		</view>
		<view class="m-cell u-border-bottom">
			<view class="m-cell-left">
				<text>支付方式</text>
			</view>
			<view class="m-cell-right">
				<text v-if="if_jifen == 1 && vuexDayCount == 1 && info.jifen > 0">积分支付</text>
				<text v-else>微信支付</text>
			</view>
		</view>
		<view class="m-cell u-border-bottom" @click="selectRuleFun">
			<view class="m-cell-left">
				<text>订房要求</text>
			</view>
			<view class="m-cell-right">
				<text>{{params.book_require}}</text>
				<image src="@/static/index/icon-right.png" mode=""></image>
			</view>
		</view>
		<u-gap height="25" bg-color="#f4f4f4"></u-gap>
		<view class="vip" v-if="levelInfo">
			<view class="vip-title">
				<view class="vip-title-left">
					<!-- <image v-if="getLevelLogoComputed" :src="getLevelLogoComputed" mode=""></image> -->
					<text>{{levelInfo.title}}会员专享</text>
				</view>
				<view class="vip-title-right" @click="detailShow = true">
					<text>已优惠￥{{order.zhekouPrice}}</text>
					<image src="@/static/index/icon-right.png" mode=""></image>
				</view>
			</view>
			<view class="vip-view">
				<view class="vip-item">
					<view class="vip-item-left">
						<text>会员折上折</text>
					</view>
					<view class="vip-item-right">
						<text>{{levelInfo.zhekou}}折房费 已优惠￥{{order.zhekouPrice}}</text>
					</view>
				</view>
				<view class="vip-item">
					<view class="vip-item-left">
						<text>延时入住</text>
					</view>
					<view class="vip-item-right">
						<text>延时1-2小时入住</text>
					</view>
				</view>
				<view class="vip-item">
					<view class="vip-item-left">
						<text>礼品赠送</text>
					</view>
					<view class="vip-item-right">
						<text>酒店前台领取</text>
					</view>
				</view>
				<view class="vip-item">
					<view class="vip-item-left">
						<text>离店奖励</text>
					</view>
					<view class="vip-item-right">
						<text>{{order.jifen || 0}}积分</text>
					</view>
				</view>
			</view>
		</view>
		<view class="m-tip">
			<view class="m-tip-title">预定提示：</view>
			<view class="">* 订单中优惠金额、优惠券部分无法开具发票</view>
			<view class="" style="color: #8F6F4C;">* 本酒店已全面消毒，请您放心入住</view>
			<view class="">* 如需纸质发票请到酒店前台领取</view>
		</view>

		<view class="m-bottom2 safe-area-inset-bottom"></view>
		<view class="m-bottom safe-area-inset-bottom">
			<view class="m-bottom-vip" @click="to_link('/pages2/hotel-member/hotel-member')">
				<view class="m-bottom-vip__left">
					<view class="m-bottom-vip__font1">升级吉泰会员，享更高礼遇</view>
					<!-- <view class="m-bottom-vip__font2">8.8折 · 免费早餐 · 3张优惠券</view> -->
				</view>
				<view class="m-bottom-vip__right">
					<image src="@/static/index/vip-right.png" mode=""></image>
				</view>
			</view>
			<view class="m-bottom-view">
				<view class="m-bottom-left" v-if="if_jifen == 1 && vuexDayCount == 1 && info.jifen > 0">
					<text class="m-price">{{info.jifen}}</text>
					<text>积分</text>
				</view>
				<view class="m-bottom-left" v-else>
					<text>订单金额</text>
					<text class="m-price">{{getPriceComputed}}</text>
				</view>
				<view class="m-bottom-right">
					<view class="m-bottom-detail" @click="detailShow = true">
						<text>明细</text>
						<image src="@/static/index/icon-right.png" mode=""></image>
					</view>
					<view class="m-bottom-btn" @click="addOrder()">提交订单</view>
				</view>
			</view>
		</view>
		<u-picker mode="selector" v-model="showTime" :range="timeList" @confirm="timeConfirm"></u-picker>
		<u-picker mode="selector" v-model="showCount" :range="countList" @confirm="countConfirm"></u-picker>

		<!-- 订房须知 -->
		<u-popup v-model="show" mode="bottom" :height="1200" :closeable="true" :borderRadius="20">
			<view class="m-popup">
				<view class="m-popup-title">订房必读</view>
				<!-- <view class="m-popup-h3">· 订单有效性核实</view>
				<view class="m-popup-content">酒店将对订单信息进行复核，如订单联系人/预订人电话无法接通(包括但不限于空号、停机等)，视为无效订单，酒店有权取消订单。</view>
				<view class="m-popup-h3">· 入住时间</view>
				<view class="m-popup-content">
					请于入住日中午14:00后办理入住，如提前到店，视酒店空房情况安排；退房时间12:00，如您本人入住或使用延时退房权益券，对应退房时间以订单页面展示为准。</view>
				<view class="m-popup-h3">· 外宾政策</view> -->
				<view class="m-popup-content">
					<u-parse :html="hotelInfo.gonggao"></u-parse>
				</view>
			</view>
		</u-popup>

		<!-- 明细 -->
		<u-popup v-model="detailShow" mode="bottom" :closeable="true" :borderRadius="20">
			<view class="m-popup-detail" v-if="orderPrice.price_list">
				<view class="m-popup-title">
					<text>费用明细</text>
				</view>
				<view class="m-popup-h3">
					<text>房费</text>
					<text style="color: #DE2C38;">￥{{getPriceComputed}}</text>
				</view>
				<view class="m-popup-cell" v-for="(item,index) in orderPrice.price_list" :key="index">
					<view class="">
						<text v-if="order_sup != 3">{{get_date('YYYY-MM-DD',(new Date(item.Date)))}}</text>
						<text v-else>{{info.hour}}小时</text>
						<text class="u-m-20">{{params.count}}间</text>
					</view>
					<!-- <text>{{get_date('YYYY-MM-DD',(new Date(item.Date)))}} {{params.count}}间</text> -->
					<text>￥{{item.ActualPrice}}</text>
				</view>
				<view class="u-p-t-25"></view>
				<view class="u-border-bottom u-m-l-25" style="width: 700rpx;"></view>
				<view class="u-p-t-25"></view>
				<view class="m-popup-cell" v-if="order.zhekouPrice > 0">
					<text>会员折上折</text>
					<text>-￥{{order.zhekouPrice}}</text>
				</view>
				<view class="m-popup-cell" v-if="couponInfo">
					<text>优惠券</text>
					<text>-￥{{couponInfo.jian}}</text>
				</view>
				<view class="u-p-t-25"></view>
				<u-gap height="25" bg-color="#f4f4f4"></u-gap>
				<view class="m-popup-h3">
					<text>本单积分</text>
				</view>
				<view class="m-popup-cell">
					<text>离店可获得积分</text>
					<text>{{order.jifen || 0}}积分</text>
				</view>
				<!-- <view class="m-popup-cell">
					<text>12月23日 1份早餐(离店日)</text>
				</view> -->
				<!-- <view class="u-p-t-25"></view>
				<view class="u-border-bottom u-m-l-25" style="width: 700rpx;"></view>
				<view class="u-p-t-25"></view>
				<view class="m-popup-cell">
					<text>会员折上折</text>
					<text>-￥528</text>
				</view>
				<view class="m-popup-cell">
					<text>优惠券</text>
					<text>-￥528</text>
				</view>
				<view class="m-popup-cell">
					<text>押金</text>
					<text>￥528</text>
				</view>
				<view class="u-p-t-25"></view>
				<u-gap height="25" bg-color="#f4f4f4"></u-gap>
				
				<view class="m-popup-h3">
					<text>加购</text>
					<text style="color: #DE2C38;">￥998</text>
				</view>
				<view class="m-popup-cell">
					<text>购买白银会员卡(1张)</text>
				</view>
				<view class="u-p-t-25"></view>
				<u-gap height="25" bg-color="#f4f4f4"></u-gap>
				
				<view class="m-popup-h3">
					<text>本单积分</text>
				</view>
				<view class="m-popup-cell">
					<text>离店可获得积分</text>
					<text>496积分</text>
				</view> -->
				<view class="u-p-t-25"></view>
				<view class="m-bottom safe-area-inset-bottom">
					<view class="m-bottom-view">
						<view class="m-bottom-left" v-if="if_jifen == 1 && vuexDayCount == 1 && info.jifen > 0">
							<text class="m-price">{{info.jifen}}</text>
							<text>积分</text>
						</view>
						<view class="m-bottom-left" v-else>
							<text>订单金额</text>
							<text class="m-price">{{getPriceComputed}}</text>
						</view>
						<view class="m-bottom-right">
							<view class="m-bottom-detail">
								<text>明细</text>
								<image src="@/static/index/icon-right.png" mode=""></image>
							</view>
							<view class="m-bottom-btn" @click="addOrder()">提交订单</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup  v-model="couponShow" mode="bottom" :closeable="true" :borderRadius="20">
			<view class="m-copupon">
				<view class="m-popup-title">
					<text>优惠券</text>
				</view>
				<view class="m-list">
					<view class="m-item" v-for="(item,index) in couponList" :key="index">
						<view class="u-flex u-row-between">
							<text class="font1">优惠券</text>
							<text class="font2">{{item.jian}}</text>
						</view>
						<view class="u-flex u-row-between">
							<text class="font3">有效期至 {{item.endTime}}</text>
							<text class="font4">满{{item.man}}元可用</text>
						</view>
						<view class="m-coupon"></view>
						<view class="u-flex u-row-between u-m-t-16">
							<view class="u-flex">
							</view>
							<view class="u-flex">
								<text class="btn" @click="userCouponFun(item)">使用</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		
		<u-popup v-model="showTimeBetween" mode="bottom" borderRadius="30" :closeable="true">
			<view class="m-popup-time">
				<view class="m-popup-title">
					<text>请选择入住时间段</text>
				</view>
				<view class="m-popup-scroll">
					<scroll-view :scroll-y="true">
						<view class="m-poup-body">
							<view class="m-list">
								<view class="m-item" v-for="(item,index) in listTimeData" :key="index" @click="currentListTime = index">
									<view class="m-item__left">
										<text>{{item.title}}</text>
									</view>
									<view class="m-item__radio" :class="{'m-item__radio--selected':currentListTime == index}"></view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="m-popup-bottom">
					<view class="m-popup-bottom__right" @click="showTimeBetween = false">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getHotelRoomInfo,
		calcOrderPrice,
		addOrder,
		pay,
		get_userInfo
	} from "@/common/function/api_fun.js"

	import {
		getRecent,
		getWeek,
		calcDay,
	} from "@/common/function/date.js"
	import {
		to_link
	} from "@/common/function/system_fun.js"
	import {
		getScoreText,
		get_date,
		replaceText,
		get_timestamp
	} from "@/common/function/tools.js"
	export default {
		data() {
			return {
				if_jifen:0,
				userInfo:{},
				order_sup:2,
				info: {},
				hotelInfo:{},
				orderPrice: {},
				order:{},
				levelInfo:null,
				levelBack:[],
				
				couponShow:false,
				couponList:[],
				couponInfo:null,
				

				show: false, //订房须知
				detailShow: false, //明细
				showTime: false,
				timeList: ['14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00',
					'次日00:00', '次日01:00', '次日02:00', '次日03:00', '次日04:00', '次日05:00', '次日06:00'
				],
				listTimeData:[],//小时房
				currentListTime:0,
				showTimeBetween:false,
				showCount: false,
				countList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				params: {
					count: 1,
					name: '',
					phone: '',
					expect_time : '14:00',
					book_require:'不限',
					crs_type:2,
				},
				roomDetail: null,
				options: null,
				totalPrice: '计算中...',
				orders_id: '',
			};
		},
		computed: {
			getPriceComputed() {
				// let price = this.orderPrice.ActualPrice || 0
				let price = this.order.price ? Number(this.order.price) : 0
				let coupon = this.couponInfo ? Number(this.couponInfo.jian) : 0
				return Number((price * this.params.count - coupon).toFixed(2))
			},
			getDateFormat() {
				return (str) => {
					return str ? get_date('MM月DD日', str + ' 00:00:00') : ''
				}
			},
			getgonggao(){
				let  info = this.hotelInfo.gonggao || ''
				return replaceText(info)
			},
			getLevelLogoComputed(){
				if(!this.levelInfo) return ''
				if(this.levelBack.length == 0) return ''
				let url = ''
				this.levelBack.forEach(item=>{
					if(item.title == this.levelInfo.title){
						url = item.image
					}
				})
				return url
			},
			getTimeInfoComputed(){
				return this.listTimeData[this.currentListTime]
			},
		},
		onLoad(options) {
			console.log(options);
			this.if_jifen = options.if_jifen || 0
			this.order_sup = options.order_sup || 2
			this.info = uni.getStorageSync('order_info')
			this.hotelInfo = uni.getStorageSync('hotelInfo')
			// this.info.price = 20.01
			// this.orderPrice = {price_list: [{"ActualPrice":100,"OrignPrice":100,"Date":"2024-02-23T00:00:00"},{"ActualPrice":100,"OrignPrice":100,"Date":"2024-02-24T00:00:00"}]}
			if (this.info.price_list) {
				this.orderPrice = this.info
			} else {
				this.$m.msg('房间信息错误', () => {
					this.to_back()
				})
			}
			this.options = options
			this.initDate(options);
			get_userInfo((data)=>{
				this.userInfo = data
			})
			uni.$on('selectContactEmit',(data)=>{
				this.params.phone = data.phone
				this.params.name = data.name
			})
			uni.$on('selectRuleEmit',(data)=>{
				this.params.book_require = data
			})
		},
		onShow() {
			this.getInfoFun()
		},
		onUnload() {
			uni.$off('selectContactEmit');
			uni.$off('selectRuleEmit');
		},
		methods: {
			get_date,
			getIndexFun(){
				this.$http.getJson('index_index').then(res=>{
					if(res.code == 1){
						this.levelBack = []
						res.data.adverts.forEach(item=>{
							if(item.title == '会员等级logo'){
								this.levelBack = item.images
							}
						})
					}
				})
			},
			getInfoFun(){
				let info = {}
				for (let i in this.info) {
					if (i != 'third_data') {
						info[i] = this.info[i]
					}
				}
				info.price = info.origin_price
				if(info.is_offer == 1 || info.is_offer == 2|| info.is_offer == 3){
					info.price = info.undiscount_price
				}
				let params = {
					home_json: JSON.stringify(info),
					num: this.params.count,
					startTime: this.vuexStartDateObj.dateStr,
					endTime: this.vuexEndDateObj.dateStr,
					customer_json: JSON.stringify({
						name: this.params.name,
						phone: this.params.phone
					}),
					home_info: JSON.stringify(this.orderPrice.price_list),
					book_require: '',
					crs_type:this.order_sup||2,
				}
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$http.getJson('hotal_getPayInfo',params).then(res=>{
					uni.hideLoading()
					if(res.code == 1){
						this.order = res.data
						this.couponList = res.data.yhqs || []
						this.levelInfo = res.data.level
					}
				})
			},
			userCouponFun(item){
				this.couponInfo = item
				this.couponShow = false
			},
			selectRuleFun(){
				this.to_link('/pages2/hotel-rule/hotel-rule')
			},
			selectConcatFun(){
				this.to_link('/pages2/hotel-contact/hotel-contact?type=select')
			},
			initDate(options) {
				if (!this.vuexStartDateObj.dateStr || !this.vuexEndDateObj.dateStr) {
					this.$u.vuex('vuexStartDateObj', {
						dateStr: options.start_time,
						week: getWeek(options.start_time),
						recent: getRecent(options.start_time)
					})
					this.$u.vuex('vuexEndDateObj', {
						dateStr: options.end_time,
						week: getWeek(options.end_time),
						recent: getRecent(options.end_time)
					})
					this.$u.vuex('vuexDayCount', calcDay(options.start_time, options.end_time))
				}
				if(this.order_sup == 3){
					let listTimeData = []
					let startDate = get_timestamp(options.start_time)
					let nowH =  get_date('HH')
					for(let i = 0 ;i < 24;i++){
						if(i > Number(nowH) - Number(this.info.hour)){
							let startTime = get_date('YYYY-MM-DD HH:mm:ss',(startDate +  i*3600)*1000)
							let	endTime = get_date('YYYY-MM-DD HH:mm:ss',(startDate +  (i + Number(this.info.hour))*3600 )*1000)
							listTimeData.push({
								startTime,
								endTime,
								title:`${startTime.slice(11,16)}-${i >= 20?'次日' :''}${endTime.slice(11,16)}(可入住${this.info.hour}小时)`,
								count:this.info.hour
							})
						}
					}
					this.listTimeData = listTimeData
				}

			},
			countConfirm(e) {
				this.params.count = this.countList[e[0]]
			},
			timeConfirm(e) {
				this.params.expect_time  = this.timeList[e[0]]
			},
			addOrder() {
				// this.to_link('/pages2/hotel-result/hotel-result')
				// return false;
				if (!this.params.name) {
					uni.showToast({
						title: '请输入联系人',
						icon: 'none',
						duration: 1500
					})
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.params.phone))) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 1500
					})
					return;
				}
				let info = {}
				for (let i in this.info) {
					if (i != 'third_data') {
						info[i] = this.info[i]
					}
				}
				info.price = info.origin_price
				if(info.is_offer == 1 || info.is_offer == 2|| info.is_offer == 3){
					info.price = info.undiscount_price
				}
				let startTime = this.vuexStartDateObj.dateStr
				let	endTime = this.vuexEndDateObj.dateStr
				if(this.order_sup == 3){
					startTime = this.getTimeInfoComputed.startTime
					endTime = this.getTimeInfoComputed.endTime
				}
				let params = {
					home_json: JSON.stringify(info),
					num: this.params.count,
					night_num:this.vuexDayCount * this.params.count,
					startTime,
					endTime,
					customer_json: JSON.stringify({
						name: this.params.name,
						phone: this.params.phone
					}),
					home_info: JSON.stringify(this.orderPrice.price_list),
					book_require: '',
					yhq_id:this.couponInfo ? this.couponInfo.id : '',
					expect_time :this.params.expect_time ,
					crs_type:this.order_sup||2,
				}
				if(this.if_jifen == 1 && this.vuexDayCount == 1 && this.info.jifen > 0 && Number(this.userInfo.jifen) < this.info.jifen){
					return this.$m.msg('积分不足')
				}

				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$u.throttle(()=>{
					this.$http.getJson('hotal_order', params).then(res => {
						if (res.code == 1) {
							if(this.if_jifen == 1 && this.vuexDayCount == 1 && this.info.jifen > 0){
								this.jifenPay(res.data.order_id)
							}else{
								this.pay(res.data.order_id)
							}
							
						} else {
							uni.hideLoading()
							this.$m.msg(res.message)
						}
					})
				},2000)
				
			},
			jifenPay(id){
				this.$http.getJson('hotal_jifenPay', {
					id
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 1){
						this.$m.msg('支付成功', () => {
							wx.redirectTo({
								url: '/pages2/hotel-result/hotel-result?id=' +id
							})
						})
					}else{
						this.$m.msg(res.message, () => {
							wx.redirectTo({
								url: '/pages/order/detail?id=' +id
							})
						})
					}
				})
			},
			pay(id) {
				this.$http.getJson('hotal_wxPay', {
					id
				}).then(res => {
					uni.hideLoading()
					if(res.code == 1){
						this.$http.wx_pay(res.data).then(e => {
							if (e.errMsg == 'requestPayment:fail cancel' || e.errMsg ==
								'requestPayment:fail') {
								this.$m.msg('支付失败', () => {
									wx.redirectTo({
										url: '/pages/order/detail?id=' +id
									})
								})
							} else {
								this.$m.msg('支付成功', () => {
									wx.redirectTo({
										url: '/pages2/hotel-result/hotel-result?id=' +id
									})
								})
							}
						})
					}else{
						this.$m.msg(res.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}

	.m-font1 {
		font-size: 28rpx;
		color: #333;
	}

	.m-font2 {
		font-size: 32rpx;
		color: #33302D;
	}

	.m-font3 {
		font-size: 26rpx;
		color: #333;
	}

	.m-font4 {
		font-size: 22rpx;
		color: #666;
	}

	.m-body {
		background: #fff;
	}

	.m-date {
		display: flex;
		align-items: center;
		padding: 30rpx 25rpx 25rpx;

		.m-date-start,
		.m-date-end,
		.m-date-count {
			font-size: 32rpx;
			color: #33302D;
			font-weight: 600;
		}

		.m-date-line {
			font-size: 32rpx;
			color: #ADA9A5;
			font-weight: 800;
			margin: 0 10rpx;
		}
	}

	.m-info {
		margin: 0 25rpx;
		padding-bottom: 25rpx;

		.m-info-title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.m-info-title__left {
				font-size: 32rpx;
				color: #33302D;
				font-weight: 600;
				width: 500rpx;
				line-height: 45rpx;
			}

			.m-info-title__right {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #9B958F;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.m-info-spec {
			font-size: 24rpx;
			color: #9B958F;
			line-height: 33rpx;
			margin-top: 8rpx;
		}

		.m-info-tag {
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			flex-wrap: wrap;

			.m-info-tag__item {
				display: flex;
				align-items: center;
				padding: 0 10rpx;
				height: 32rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2rpx solid #D3CEC9;
				font-size: 18rpx;
				color: #8F6F4C;
				margin-right: 10rpx;
				margin-bottom: 5rpx;
			}
		}
	}

	.m-intro {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;

		.m-intro-left {
			width: 500rpx;
			font-size: 24rpx;
			color: #33302D;
			line-height: 36rpx;
		}

		.m-intro-right {
			display: flex;
			align-items: flex-start;

			.m-intro-more {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #8F6F4C;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}

	.m-box {
		width: 700rpx;
		background: #F6F6F6;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 25rpx 25rpx 13rpx;
		margin-left: 25rpx;

		.m-box-item {
			margin-bottom: 12rpx;
			font-size: 24rpx;
			color: #DE2C38;
			line-height: 33rpx;
		}
	}

	.m-cell {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 25rpx;
		background: #fff;

		.m-cell-left {
			display: flex;
			width: 200rpx;
			height: 100%;
			align-items: center;
			font-size: 28rpx;
			color: #76706B;
		}

		.m-cell-right {
			display: flex;
			flex: 1;
			justify-content: space-between;
			align-items: center;
			height: 100%;
			font-size: 28rpx;
			color: #33302D;
			font-weight: 600;

			input {
				flex: 1;
				height: 100%;
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}

			.m-cell-coupon {
				display: flex;
				align-items: center;
				padding: 0 12rpx;
				height: 40rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2rpx solid #DE2C38;
				font-size: 24rpx;
				color: #DE2C38;
			}

			.m-cell-concat {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 56rpx;
				height: 100%;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}

	.vip {
		width: 750rpx;
		background: #fff;
		padding-bottom: 6rpx;

		.vip-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 104rpx;
			padding: 0 25rpx;
			background: linear-gradient(180deg, #FFEBDB 0%, rgba(255, 235, 219, 0) 100%);

			.vip-title-left {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #33302D;
				font-weight: 600;

				image {
					width: 64rpx;
					height: 40rpx;
					margin-right: 5rpx;
				}
			}

			.vip-title-right {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #33302D;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.vip-view {
			width: 700rpx;
			border-top: 1px solid #E6E2DE;
			padding-top: 30rpx;
			margin-left: 25rpx;
			background: #fff;

			.vip-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 24rpx;

				.vip-item-left {
					font-size: 28rpx;
					color: #76706B;
				}

				.vip-item-right {
					font-size: 26rpx;
					color: #33302D;
				}
			}
		}
	}

	.m-tip {
		padding: 25rpx 25rpx 300rpx;
		font-size: 26rpx;
		color: #333;
		line-height: 38rpx;

		.m-tip-title {
			font-size: 32rpx;
			color: #33302D;
			font-weight: 600;
			margin-bottom: 15rpx;
		}
	}

	.m-bottom2 {
		box-sizing: content-box;
		width: 750rpx;
		height: 120rpx;
	}

	.m-bottom {
		box-sizing: content-box;
		width: 750rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;

		.m-bottom-view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 120rpx;
			box-shadow: 0 -10rpx 20rpx rgba($color: #000000, $alpha: 0.05);
			background: #fff;
		}

		.m-bottom-vip {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: content-box;
			width: 750rpx;
			height: 96rpx;
			background: #FFF3E6;

			.m-bottom-vip__left {
				padding-left: 25rpx;

				.m-bottom-vip__font1 {
					font-size: 26rpx;
					color: #33302D;
					font-weight: 600;
				}

				.m-bottom-vip__font2 {
					font-size: 22rpx;
					color: #33302D;
				}
			}

			.m-bottom-vip__right {
				padding-right: 25rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.m-bottom-left {
			padding-left: 25rpx;
			font-size: 28rpx;
			color: #33302D;
		}

		.m-bottom-right {
			display: flex;
			align-items: center;
			padding-right: 25rpx;

			.m-bottom-detail {
				display: flex;
				align-items: center;
				margin-right: 24rpx;

				image {
					transform: rotate(-90deg);
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}

	.m-bottom-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 240rpx;
		height: 88rpx;
		background: #D3A358;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 32rpx;
		color: #fff;
	}

	.m-price {
		font-size: 40rpx;
		color: #DE2C38;

		&::before {
			content: '￥';
			font-size: 24rpx;
			color: #DE2C38;
		}
	}

	.m-popup {
		padding: 40rpx 25rpx;

		.m-popup-title {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			color: #33302D;
			font-weight: 600;
			line-height: 50rpx;
			margin-bottom: 60rpx;
		}

		.m-popup-h3 {
			font-size: 28rpx;
			color: #33302D;
			line-height: 40rpx;
			font-weight: 600;
			margin-bottom: 15rpx;
		}

		.m-popup-content {
			font-size: 26rpx;
			color: #76706B;
			line-height: 40rpx;
			margin-bottom: 40rpx;
		}
	}

	.m-popup-detail {
		padding-bottom: 200rpx;

		.m-popup-title {
			padding: 40rpx 0 30rpx 0;
			text-align: center;
			font-size: 36rpx;
			color: #33302D;
			font-weight: 600;
		}

		.m-popup-h3 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #33302D;
			font-weight: 600;
			padding: 30rpx 25rpx 25rpx;
		}

		.m-popup-cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			color: #76706B;
			line-height: 40rpx;
			padding: 0 25rpx;
		}
	}
	
	
	.m-copupon{
		background: #f5f5f5;
		.m-popup-title {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			color: #33302D;
			font-weight: 600;
			line-height: 50rpx;
			padding-top: 40rpx;
			padding-bottom: 10rpx;
		}
		.m-list{
			display: flex;
			flex-direction: column;
			padding: 20rpx 30rpx;
			.m-item{
				display: flex;
				flex-direction: column;
				padding: 30rpx;
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
			}
		}
		.font1{
			font-size: 28rpx;
			color: #33302D;
			font-weight: 800;
		}
		.font2{
			font-size: 48rpx;
			color: #D3A358;
			&::before{
				content: '￥';
				font-size: 30rpx;
			}
		}
		.font3{
			font-size: 24rpx;
			color: #9B958F;
		}
		.font4{
			font-size: 24rpx;
			color: #9B958F;
		}
		
		.m-coupon{
			height: 1px;
			border-bottom: 1px #EEEEEE dashed;
			margin-top: 22rpx;
			position: relative;
			&::before{
				content: '';
				position: absolute;
				width: 10rpx;
				height: 20rpx;
				border-top-right-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				background: #f4f4f4;
				left: -30rpx;
				top: -10rpx;
			}
			&::after{
				content: '';
				position: absolute;
				width: 10rpx;
				height: 20rpx;
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
				background: #f4f4f4;
				right: -30rpx;
				top: -10rpx;
			}
		}
		.img{
			width: 16rpx;
			height: 8rpx;
		}
		.btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 120rpx;
			height: 48rpx;
			background: linear-gradient(180deg, #E4C89A 0%, #D3A358 100%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-size: 24rpx;
			color: #fff;
		}
		.btn-extend1{
			background: #BDBDBD;
		}
		.btn-extend2{
			background: #FFA200;
		}
		.m-text{
			transition: all 0.3;
			font-size: 24rpx;
			color: #9B958F;
		}
		.hidden{
			display: none;
			height: 0;
			opacity: 0;
		}
	}
	
	
	.m-popup-time {
		display: flex;
		flex-direction: column;
		width: 750rpx;
		height: 1100rpx;
	
		.m-popup-title {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FBF6EE;
			height: 108rpx;
			font-size: 32rpx;
			color: #33302D;
			font-weight: 600;
		}
	
		.m-popup-scroll {
			height: 872rpx;
			width: 100%;
	
			scroll-view {
				width: 100%;
				height: 100%;
			}
	
			.m-poup-body {
				padding: 0 25rpx;
	
				.m-list{
					padding: 0 30rpx;
					border-bottom: 20rpx solid #f5f5f5;
					.m-item{
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 94rpx;
						.m-item__left{
							font-size: 28rpx;
							color: #222;
						}
						.m-item__radio{
							width: 36rpx;
							height: 36rpx;
							border: 2rpx solid #D7D7D7;
							border-radius: 50%;
						}
						.m-item__radio--selected{
							border: 8rpx solid #D3A358;
						}
					}
				}
			}
		}
	
		.m-popup-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 750rpx;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 10rpx 1rpx rgba(0, 0, 0, 0.06);
	
			.m-popup-bottom__right {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 702rpx;
				height: 88rpx;
				background: #D3A358;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-size: 32rpx;
				color: #fff;
				margin-left: 24rpx;
			}
		}
	}
</style>